import React, { Component, createRef } from 'react'
import {userLogin} from '../api/user'

import { inject, observer } from 'mobx-react';

@inject('userStore','testStore')
@observer
class Login extends Component {
    constructor(props) {
        super(props)
        this.upRef = createRef();
        this.state = {
            image: '',
            routeUrl: this.props.location.state && this.props.location.state.from.pathname
        }
        console.log(props)
    }
    // 设置token
    handleSetToken = async() => {
        // 登陆成功后，应该跳回原来页面
        const result = await userLogin({token: '21423423423523'})
        this.props.userStore.setToken(result.token)
        this.props.history.push(this.state.routeUrl)
    }
    handlePhoto = (event) => {
        const files = event.target.files[0]
        // console.log(files)
        let image = window.URL.createObjectURL(files);
        this.setState({image})
    }

    render() {
        return (
            <div className="login">
                <h1>我是登录页面</h1>
                <button className="lg-btn" onClick={this.handleSetToken}>点击设置token</button>
                <div>
                    <h2>React自定义input样式以及实现上传照片功能</h2>
                    <input
                        type="file"
                        ref={this.upRef}	//挂载ref
                        accept=".jpg,.jpeg,.png"	//限制文件类型
                        hidden
                        onChange={this.handlePhoto}
                    />
                    <span
                        onClick={() => {
                            this.upRef.current.click()		//当点击a标签的时候触发事件
                        }}
                        //自己看心情改样式吧
                        style={{
                            height: '39px',
                            lineHeight: '39px',
                        }}
                    >点击上传照片
                    </span>
                    <img src={this.state.image} style={{width:'200px'}} alt=""/>
                </div>
            </div>
        )
    }
}


export default Login